<template>
  <el-card v-if="commentLength">
    <div class="blog-comment blog-comment--list">
      <h3>评论列表</h3>
      <ul>
        <CommentItem
          v-for="comment in comments"
          :key="comment.id"
          :uid="comment.uid"
          :content="comment.content"
          :date="comment.date"
        />
      </ul>
    </div>
  </el-card>
</template>

<script>
import CommentItem from "@/components/comment/CommentItem";
export default {
  name: "CommentList",
  components: {
    CommentItem,
  },
  props: {
    comments: {
      type: Array,
    },
  },
  data() {
    return {};
  },
  computed: {
    commentLength() {
      return this.comments?.length || 0;
    },
    uid() {
      return this.comments;
    },
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="stylus" >
@import '~assets/css/base.styl';

.blog-comment {
  font-size: 16px;
  background-color: line-modifier-color;
  border-radius: radius-theme-size;
  margin-top: padding-space * 2;

  & h3 {
    padding: padding-space;
  }
}

.blog-comment--list {
  padding: 20px 0;
  // background-color: bg-theme-color;
}

.blog-comment--item {
  margin-bottom: padding-space;
  padding: padding-space * 2;
  background-color: line-modifier-color;
  border-bottom: 2px solid bg-theme-color;
}

.blog-comment--user {
  display: flex;
  align-items: center;
  padding: padding-space 0;
  font-size: 14px;
  line-height: 24px;
}

.blog-comment--avatar {
  overflow: hidden;
  width: 24px;
  height: 24px;
  border-radius: 50%;

  &>img {
    width: 24px;
    height: auto;
  }
}

.blog-comment--name {
  padding-top: 6px;
  padding-left: padding-space;
  color: font-theme-color;
}

.blog-comment-content {
  overflow: hidden;
  padding: 20px 0;
  word-wrap: break-word;
  word-break: break-word;
  color: #666;
}

.blog-comment-date {
  text-align: right;
}
</style>